<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <style>
        #banner{position: relative;}
        #banner .banner_list{width: 100%;height: 469px;position: relative;}
        #banner .banner_list li{width: 100%;height: 100%;background: center 0 no-repeat;position: absolute;left: 0;top: 0;opacity: 0;z-index: 1;}
        #banner .banner_list li.active{opacity: 1;z-index: 10;}
        #banner .banner_list li a{display: block;width: 100%;height: 100%;}
        #banner .banner_button{position: absolute;bottom: 19px;width: 100%; z-index: 20;text-align: center;font-size: 0;}
        #banner .banner_button li{display: inline-block;width: 12px;height: 12px;border: 2px white solid;border-radius: 100%;margin: 0 6px;cursor: pointer;}
        #banner .banner_button li.active{background-color: white;}


        #service{overflow: hidden;min-height: 427px;}
        #service .service_list{text-align: center;margin-top: 34px;}
        #service .service_list li{float: left; width: 250px;margin: 0 10px;padding-bottom: 25px;}
        #service .service_list li:hover{border-bottom: 4px solid #66c5b4;}
        #service .service_list div{width: 102px;height: 102px;margin: 0 auto;}
        #service .service_list li:nth-of-type(1) div{background-image: url(./images/web1.png);}
        #service .service_list li:nth-of-type(1) div:hover{background-image: url(./images/web2.png);}
        #service .service_list li:nth-of-type(2) div{background-image: url(./images/graphic1.png);}
        #service .service_list li:nth-of-type(2) div:hover{background-image: url(./images/graphic2.png);}
        #service .service_list li:nth-of-type(3) div{background-image: url(./images/e-bussiness1.png);}
        #service .service_list li:nth-of-type(3) div:hover{background-image: url(./images/e-bussiness2.png);}
        #service .service_list li:nth-of-type(4) div{background-image: url(./images/mail1.png);}
        #service .service_list li:nth-of-type(4) div:hover{background-image: url(./images/mail1.png);}
        #service .service_list h3{font-size: 18px;color: #747474;line-height: 36px;margin-top: 25px;}
        #service .service_list p{font-size: 14px;color: #999999;line-height: 22px;}

        #case{background-color: #f8f8f8;height: 462px;}
        #case .case_title{text-align: center;padding-top: 60px;}
        #case h2{color: #66c5b4;font-weight: normal;font-size: 20px;line-height: 30px;}  
        #case p{color: #9d9d9d;font-size: 12px; line-height: 25px;}
        #case .case_list{text-align: center;margin-top: 43px;}
        #case .case_list li{float: left;width: 340px;margin: 0 10px;}
        #case .case_btn{background: url(./images/casecur.png) no-repeat center 0;text-align: center;height: 35px;line-height: 35px;margin-top: 40px;font-size: 14px;}
        #case .case_btn a{color: white;}
        #case .case_btn a:hover{text-decoration: underline;}

        #news{min-height: 451px;overflow: hidden;}
        #news dl{margin-top: 48px;}
        #news dt{width: 234px;}
        #news dd{width: 846px;}
        #news .news_list{width: 100%;}
        #news .news_list li{width: 50%;float: left;margin-bottom: 48px;}
        #news .news_date{width: 71px;height: 70px; border-right: 1px #DCDCDC solid;text-align: center;}
        #news .news_date i{font-size: 39px;color: #66c5b4;display: block;line-height: 39px;font-weight: bold;font-style: normal;}
        #news .news_date span{font-size: 20px;color: #999999;display: block;line-height: 36px;}
        #news .news_text{width:310px;margin-left: 20px;}
        #news .news_text h3{font-size: 14px;color: #3F3F3F;font-weight: normal;}
        #news .news_text h3 a:hover{text-decoration: underline;color: #3F3F3F;}
        #news .news_text p{font-size: 12px;line-height: 21px;color:#999999; margin-top: 14px;}

 

</style>
</head>
<body>
    <div class="gdhead">          
        <div id="head" class="container">
            <div class="head_logo l">
                <a href="#">
                    <img src="./images/logo.png" alt="博文尚美" title="博文尚美">
                </a>     
            </div>
            <ul class="head_menu r">
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">关于我们</a>
                </li>
                <li>
                    <a href="">客户案例</a>
                </li>
                <li>
                    <a href="">新闻资讯</a>
                </li>
                <li>
                    <a href="">联系我们</a>
                </li>
                <li></li>
            </ul>
        </div>
    </div>

    <div id="banner" class="container-fluid">
        <ul class="banner_list">
            <li class="active" style="background-image: url(./images/banner1.jpg)">
                <a href="#">
                </a>
            </li>
            <li style="background-image: url(./images/banner2.jpg)">
                <a href="#">
                </a>
            </li>
        </ul>
        <ol class="banner_button">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>

    <div id="service" class="container">
        <div class="area_title">
            <h2>服务范围</h2>
            <p>OUR SERVICE</p>
        </div>
        <ul class="service_list">
            <li>
                <div></div>
                <h3>1.WEB DESIGN</h2>
                <p>企业品牌网站设计 / 手机网站制作<br>
                    动画网站创意设计</p>
                
            </li>
            <li>
                <div></div>
                <h3>2.GRAPHIC DESIGN</h2>
                <p>标志LOGO设计 / 产品宣传册设计<br>
                    企业广告 / 海报设计</p>
            </li>
            <li>
                <div></div>
                <h3>3.E-BUSINESS PLAN</h2>
                <p>淘宝 / 天猫装修设计及运营推广<br>
                    企业微博 / 微信营销</p>
            </li>
            <li>
                <div></div>
                <h3>4.MAILBOX AGENTS</h2>
                <p>腾讯 / 网易企业邮箱品牌代理<br>
                    个性化邮箱定制开发</p>
            </li>
        </ul>
    </div>

    <div id="case" class="container-fluid">
        <div class="container">
            <div class="case_title">
                <h2>［ 客户案例 ］</h2>
                <p>With the best professional technology, to design the best innovative web site</p>
            </div>
            <ul class="case_list clear">
                <li>
                    <a href="#">
                        <img src="./images/one.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/two.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/three.jpg" alt="">
                    </a>
                </li>
            </ul>
            <div class="case_btn" >
                <a href="">VIEW MORE</a>
            </div>
        </div>
    </div>

    <div id="news" class="container">
        <div class="area_title">
            <h2>最新资讯</h2>
            <p>TEH LATEST NEWS</p>
        </div>
        <dl>
            <dt class="l">
                <img src="./images/xs1.jpg" alt="">
            </dt>
            <dd class="l">
                <ul class="news_list">
                    <li>
                        <div class="news_date l">
                            <i>18</i>
                            <span>Aug</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">漳州西恩视觉婚纱摄影网站建设</a></h3>
                            <p>漳州西恩视觉婚纱摄影隶属西恩视觉文化传播有限公司旗下婚纱摄影品牌，由国内著名摄影师冬晖CHAN...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>16</i>
                            <span>Aug</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">网站数据统计用哪种比较好?</a></h3>
                            <p>网站数据统计代码是平常网站建设过程中最受用户青睐的数据统计工具，几乎每个用户的网站程序都会...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>14</i>
                            <span>Aug</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">厦门网站建设服务的内容主要有哪些？</a></h3>
                            <p>大多数用户建网站由于都是头一次接触，对于网站建设并不了解，往往会误认为找网站建设公司建网站...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>12</i>
                            <span>Aug</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">海石景观股份有限公司网站设计案例解析</a></h3>
                            <p>此次网站整体设计采用扁平化的的风格、简约式排版，网站主视觉区采用大面积的视觉效果图，以动画...</p>
                        </div>
                    </li>
                </ul>
            </dd>
        </dl>
    </div>

    <div id="foot" class="container-fluid">
        <div class="container">
            <p class="l"> Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</p>
            <div class="r">
                <a href="#">Home</a>  |  <a href="#">About</a>  |  <a href="#">Portfolio</a>  |  <a href="#">Contact</a>
            </div>
        </div>
    </div>
</body>
</html>